<template>
	<el-container>
		<el-header>
			<el-button type="primary" @click="back_url()">返回</el-button>
		</el-header>
		<el-main>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item label="项目名称">
					<el-input v-model="form.name" class="input"></el-input>
				</el-form-item>
				<el-form-item label="简介">
					<el-input v-model="form.short_name" class="input" placeholder="请输入简介"></el-input>
				</el-form-item>
				<el-form-item label="楼盘">
					<el-select v-model="form.pid" filterable laceholder="请选择" class="input" @change="properties_change">
						<el-option v-for="(item,index) in properties" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="楼层">
					<el-select v-model="form.fid" filterable laceholder="请选择" class="input">
						<el-option v-for="(item,index) in floors" :key="index" :label="item.name" :value="item.id"
							v-if="item.pid==form.pid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="面积">
					<el-input v-model="form.area" class="input"></el-input>
				</el-form-item>

				<el-form-item label="想买人数">
					<el-input v-model="form.pay_num" class="input"></el-input>
				</el-form-item>

				<el-form-item label="价格">
					<el-input v-model="form.price" class="input"></el-input>
				</el-form-item>

				<el-form-item label="联系电话">
					<el-input v-model="form.phone" class="input"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort" class="input" type="number"></el-input>
				</el-form-item>
				<el-form-item label="开盘时间">
					<el-date-picker v-model="form.opening_quotations" type="datetime" format="yyyy:MM:dd HH:mm:ss"
						value-format="yyyy:MM:dd HH:mm:ss" placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="状态">
					<el-radio-group v-model="form.state">
						<el-radio v-for="(item,index) in state" :key="index" :label="index">{{item}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="视频">
					<UpVideo @get_path="get_path"></UpVideo>
				</el-form-item>
				<el-form-item label="封面">
					<PicOne :url="form.icon" index="icon" @get_url="get_url" @delImg="delImg"></PicOne>
				</el-form-item>

				<el-form-item label="vr演示地址">
					<el-input v-model="form.vr_address" class="input"></el-input>
				</el-form-item>





				<el-form-item label="轮播图">
					<el-row>
						<el-col :span="3" v-for="(item,index) in form.banners" :key="index">
							<PicOne :url="item"></PicOne>
						</el-col>
						<el-col :span="3">
							<PicOne index="banners" @get_url="get_banners"></PicOne>
						</el-col>
					</el-row>
				</el-form-item>
        
				<el-form-item label="广告位" class="banners">
					<PicOne :url="form.advertisement" index="advertisement" @get_url="get_url" @delImg="delImg">
					</PicOne>
				</el-form-item>
				<el-form-item label="相册">
					<el-row>
						<el-col :span="3" v-for="(item,index) in form.photoes" :key="index">
							<PicOne :url="item"></PicOne>
						</el-col>
						<el-col :span="3">
							<PicOne index="banners" @get_url="get_photoes"></PicOne>
						</el-col>
					</el-row>
				</el-form-item>

				<el-form-item label="标签">
					<el-tag class="tags" v-for="(item,index) in form.label" :key="index" closable
						:disable-transitions="false" @close="cancel_label(index)">
						{{item}}
					</el-tag>
					<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
						size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
					</el-input>
					<el-button v-else class="button-new-tag" size="small" @click="inputVisible=true">添加</el-button>
				</el-form-item>
				<el-form-item label="顾问" class="form">
					<el-select v-model="form.customs" filterable laceholder="请选择" class="input" multiple>
						<el-option v-for="(item,index) in customs" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="form.type" filterable laceholder="请选择" class="input">
						<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="亮点">
					<div v-for="(item,index) in form.highlights" :key="index" style="margin-top: 10px;">
						<el-input v-model="form.highlights[index]" class="input"></el-input>
						<i class="el-icon-circle-close" @click="del_highlight(index)"></i>
					</div>
					<el-button style="margin-top: 10px;" type="primary" @click="add_highlights">添加亮点</el-button>
				</el-form-item>
				<el-form-item label="户型">
					<div v-for="(item,index) in form.house_types" :key="index" style="margin-top: 10px;">
						<div>
							<el-input v-model="item.name" class="input" placeholder="请输入名"></el-input>
							<el-input v-model="item.price" class="input" placeholder="请输入价格"></el-input>
							<el-input v-model="item.area" class="input" placeholder="请输入面积"></el-input>
							<el-input v-model="item.wy_type" class="input" placeholder="请输入物业类型"></el-input>

						</div>
						<!-- fixtures:"",//装修标准
						age:"",//产权年限
						state:"",//销售装填,
						total_price:"",//参考总价
						image:""//鸟瞰图 -->
						<div>
							<el-input v-model="item.th" class="input" placeholder="请输入梯户"></el-input>
							<el-input v-model="item.direct" class="input" placeholder="请输入朝向"></el-input>
							<el-select v-model="item.floor" filterable laceholder="请选择楼层" class="input">
								<el-option v-for="(item,index) in floors" :key="index" :label="item.name"
									:value="item.name">
								</el-option>
							</el-select>
							<el-input v-model="item.fixtures" class="input" placeholder="请输入装修标准"></el-input>
						</div>

						<div>
							<el-input v-model="item.age" class="input" placeholder="请输入产权年限"></el-input>
							<el-input v-model="item.state" class="input" placeholder="请输入销售状态"></el-input>
							<el-input v-model="item.total_price" class="input" placeholder="请输入参考总价"></el-input>
						</div>
						<div>
							<span>封面</span>
							<!-- <i class="el-icon-circle-close" @click="del_house_types(index)"></i> -->
							<PicOne @delImg="del_ht_img" :url="item.image" :index="index" @get_url="house_type_url">
							</PicOne>
						</div>
						<!--   <span>轮播图</span>
                <div style="display: flex;  flex-wrap: wrap;" v-for="(item1,index1) in item.banners" :key="index1">
                <template>
                  <i class="el-icon-circle-close" @click="del_types_banners(index,index1)"></i>
                  <div class="picA">
                    <img class="img" :src="$get_img+item1">
                  </div>
                </template>
              </div>
              <PicOne :index="index" @get_url="get_types_banners"></PicOne>
 -->

						<div>
							<span>轮播图</span>
							<el-row>
								<el-col :span="3" v-for="(item1,index1) in item.banners" :key="index1">
									<PicOne :url="item1"></PicOne>
								</el-col>
								<el-col :span="3">
									<PicOne :index="index" @get_url="get_types_banners"></PicOne>
								</el-col>
							</el-row>
						</div>

						<div>
							<span>鸟瞰图</span>
							<!-- <i class="el-icon-circle-close" @click="del_house_types(index)"></i> -->
							<PicOne @delImg="del_pic_img" :url="item.pic" :index="index" @get_url="house_pic_url">
							</PicOne>
						</div>


					</div>
					<el-button style="margin-top: 10px;" type="primary" @click="add_house_type">添加户型</el-button>
				</el-form-item>

				<!-- 	name: "",
				image: "",
				price:"",
				area:"",
				wy_type:"",
				direct:"",
				th:"",
				floor:"" -->

				<el-form-item label="自定义">
					<div v-for="(item,index) in form.custom_data" :key="index" style="margin-top: 10px;">
						<el-row :gutter="10">
							<el-col :span="1">
								名称
							</el-col>
							<el-col :span="3">
								<el-input v-model="item.name"></el-input>
							</el-col>
							<el-col :span="1">
								数据
							</el-col>
							<el-col :span="3">
								<el-input v-model="item.value"></el-input>

							</el-col>
							<el-col :span="1">

								<i class="el-icon-circle-close" @click="del_custom_data(index)"></i>
							</el-col>
						</el-row>
					</div>
					<el-button style="margin-top: 10px;" type="primary" @click="add_custom_data">添加数据</el-button>
				</el-form-item>

				<el-form-item label="相册">
					<div v-for="(item,index) in form.album" :key="index" style="margin-top: 10px;">
						<el-row :gutter="10">
							<el-col :span="1">

								<i class="el-icon-circle-close" @click="del_album(index)"></i>
							</el-col>
							<el-col :span="2">
								分类名称
							</el-col>
							<el-col :span="3">
								<el-input v-model="item.name"></el-input>
							</el-col>

							<el-col :span="3" v-for="(item1,index1) in item.image" :key="index1">
								<PicOne :url="item1" @delImg="del_albums(index,index1)"></PicOne>
							</el-col>
							<el-col :span="3">
								<PicOne :index="index" @get_url="get_album"></PicOne>
							</el-col>

							<!-- <el-col :span="1">
								数据
							</el-col> -->
							<!-- <el-col :span="3">
								<el-input v-model="item.value"></el-input>

							</el-col> -->

						</el-row>
					</div>
					<el-button style="margin-top: 10px;" type="primary" @click="add_pic_cate">添加相册</el-button>
				</el-form-item>

				<el-form-item label="在售产品" class="form">
					<el-input v-model="form.sale_infor" class="input"></el-input>
				</el-form-item>

				<el-form-item label="地址">
					<el-input v-model="form.address" class="input"></el-input>
				</el-form-item>
				<el-form-item label="位置">
					<Map :position="position" :center="form.position" zoom="18" :icon="icon"
						:choose_position="get_position"></Map>
				</el-form-item>

				<el-form-item label="详情">
					<Edit :contents="form.content" :content_back="content_back"></Edit>
				</el-form-item>
				<el-form-item>

					<el-button type="primary" @click="submit">提交</el-button>

				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
	import PicOne from '../../components/UploadPicOne.vue'
	import UpVideo from '../../components/upload_file.vue'
	import Edit from '../../components/quill-editor.vue'
	import Map from '../../components/amap.vue'
	export default {
		components: {
			PicOne,
			UpVideo,
			Edit,
			Map
		},
		data() {
			return {
				inputVisible: false,
				inputValue: "",
				position: [104.922377, 25.115802],
				form: {
					pid: "",
					fid: "",
					short_name: "",
					name: "",
					icon: "",
					area: "",
					vr_address: '',
					banners: [],
					label: [],
					price: "",
					address: "",
					sale_infor: "",
					advertisement: "",
					phone: "",
					video: "",
					opening_quotations: "",
					sort: 0,
					state: 0,
					content: "",
					customs: [],
					type: "",
					highlights: [],
					house_types: [],
					position: [104.922377, 25.115802],
					custom_data: [],
					photoes: [],
					album: [],
					pay_num: ""

				},
				properties: [],
				url: ["/cms/table/insert", "/cms/table/update"],
				edit_type: 0,
				edit_tips: ["添加成功", "修改成功"],
				state: ["待出售", "出售中", "已售出"],
				floors: [],
				icon: this.$get_img + 'system/icon/shop.png',
				types: [],
				customs: [],
			}
		},
		mounted() {
			let data = localStorage.getItem("edit");
			if (data) {
				this.edit_type = 1,
					this.form = JSON.parse(data)
				localStorage.removeItem("edit")
			}
			this.get_properties()
			this.get_floors()
			this.get_types()
			this.get_customs()


		},
		methods: {
			content_back(e) {
				this.form.content = e
			},
			del_house_types(index) {
				this.form.house_types.splice(index, 1)
			},
			del_photo(index) {
				this.form.photoes.splice(index, 1)
			},
			del_album(index) {
				this.form.album.splice(index, 1)
			},
			del_ht_img(e) {
				this.form.house_types[e].image = ""
			},
			del_pic_img(e) {
				this.form.house_types[e].pic = ""
			},
			get_types_banners(e) {
				console.log(e)
				if (!this.form.house_types[e.index]["banners"]) {
					this.form.house_types[e.index]["banners"] = []
				}

				this.form.house_types[e.index]["banners"].push(e.url)
				console.log(this.form)
			},
			del_albums(index, index1) {
				this.form.album[index].image.splice(index1, 1)
			},
			get_album(e) {
				this.form.album[e.index].image.push(e.url)
			},
			del_types_banners(index, index1) {
				this.form.house_types[index]["banners"].splice(index1, 1)
			},
			submit() {
				this.form["table"] = "houses"
				this.$model.post(this.url[this.edit_type], this.form).then(res => {
					if (res.code == 200) {
						this.$message({
							message: this.edit_tips[this.edit_type],
							type: 'success'
						});
						this.$router.go(-1)
					}

				})
			},
			handleInputConfirm() {
				this.inputVisible = false
				if (this.inputValue) {
					this.form.label.push(this.inputValue)
				}
				this.inputValue = ""
			},
			add_house_type() {
				let data = {
					name: "",
					image: "",
					price: "",
					area: "",
					wy_type: "",
					direct: "",
					th: "",
					floor: "",
					fixtures: "", //装修标准
					age: "", //产权年限
					state: "", //销售状态,
					total_price: "", //参考总价
					pic: "", //鸟瞰图
					banners: []

				}
				console.log(data)
				this.form.house_types.push(data)
			},
			get_position(e) {
				console.log(e)
				this.form.position = e
				let data = {
					position: e
				}
				this.$model.post("/cms/common/regeo", data).then(res => {
					if (res.code == 200) {
						this.form.address = res.data.regeocode.formatted_address
						console.log(res)
					}
				})
			},
			add_pic_cate() {
				let type = {
					name: "",
					image: []
				}
				this.form.album.push(type)
			},
			del_custom_data(index) {
				this.form.custom_data.splice(index, 1)
			},
			add_custom_data() {
				let data = {
					name: "",
					value: ""
				}
				this.form.custom_data.push(data)
			},
			del_highlight(index) {
				this.form.highlights.splice(index, 1)
			},
			house_type_url(e) {
				console.log(e)
				this.form.house_types[e.index].image = e.url
			},
			house_pic_url(e) {
				console.log(e)
				this.form.house_types[e.index].pic = e.url
			},
			add_highlights() {
				this.form.highlights.push("")
			},
			get_url(e) {
				this.form[e.index] = e.url
			},
			get_banners(e) {
				this.form.banners.push(e.url)
			},
			get_photoes(e) {
				this.form.photoes.push(e.url)
			},
			cancel_label(index) {
				this.form.label.splice(index, 1)
			},
			get_path(e) {
				this.form.video = e.path
				console.log(e)
			},
			del_banners(index) {
				this.form.banners.splice(index, 1)
			},
			//获取所有顾问
			get_customs() {
				let data = {
					table: "customs",
					select: ["id", "name"]
				}
				this.$model.post("/cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.customs = res.data
					}
				})
			},
			delImg(e) {
				this.form[e] = ""
			},
			//获取所有类型
			get_types() {
				let data = {
					table: "types",
					select: ["id", "name"]
				}
				this.$model.post("/cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.types = res.data
					}
				})
			},
			//获取所有楼盘
			get_properties() {
				let data = {
					table: "properties",
					select: ["id", "name"]
				}
				this.$model.post("/cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.properties = res.data
					}
				})
			},
			properties_change(e) {
				this.form.fid = ""
			},
			//获取所有楼层
			get_floors() {
				let data = {
					table: "floors",
					select: ["id", "name", "pid"]
				}
				this.$model.post("/cms/table/get_all", data).then(res => {
					if (res.code == 200) {
						this.floors = res.data
					}
				})
			}
		}
	}
</script>

<style>
	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.input {
		width: 300px;
	}

	.form {
		width: 400px;
		float: left;
		margin-left: 200rpx;
	}

	.select {
		width: 100%;
	}

	.tags {
		margin-left: 10px;
	}

	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}

	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}

	.banner {
		width: 1000px;
	}

	.banner_img {
		display: flex;
		flex-wrap: wrap;
	}

	.sku_input {
		width: 150px;
	}

	.sku_data {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		width: 1000rpx;
	}

	.quill-editor {
		width: 1000px;
		height: 250px;
	}

	.sub {
		margin-top: 100px;
	}
</style>
